<template>
  <div>
    <div class="goods" v-for="(item, i) in order_list" :key="i" @click="get_order(item.id)">
      <img :src="item.shops_avatar_url" alt="" class="goods_image" />
      <div class="goods_desc">
        <div class="van-ellipsis">
          {{ item.shops_name }}
          <br />
          <div class="goods_desc_data">
            <span style="float: right"> ￥{{ item.total_amount }} <br> {{ item.pay_state_name }} </span>
          </div>
          支付方式：{{ item.pay_method_name }}
          <br />
          数量：{{ item.sum }}
          <br />
          下单时间：{{ datetime(item.pay_time) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { datetime } from '../../utlis/utils'
export default {
  data() {
    return {
      datetime,
      order_list: [],
    };
  },
  created() {
    this.submit();
  },
  methods: {
    submit: function () {
      this.myaxios(this.host + "shops/order/", "get", {
        user_id: localStorage.getItem("id"),
      }).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.order_list = data.data;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    get_order:function(id){
      this.$router.push({path:'/shops_order_details',query:{order_id:id}})
    },
  },
};
</script>

<style>
.goods_home {
  width: 100%;
  min-height: 74vh;
  height: auto;
}
.search {
  position: sticky;
  top: 3vw;
}
.search_input {
  padding: 0px 0px 0px 3vw;
  border: 1px solid #ee0a24;
  border-radius: 5vw;
  height: 10vw;
}
.goods {
  margin-top: 3vw;
  padding: 3vw;
  width: calc(100% - 6vw);
  min-height: 22vw;
  height: auto;
  overflow: hidden;
  background-color: white;
  border-radius: 3vw;
}
.goods_image {
  float: left;
  width: 22vw;
  height: 22vw;
  border-radius: 5px;
}
.goods_desc {
  float: left;
  padding-left: 3vw;
  width: calc(100% - 25vw);
}
.goods_desc_data {
  padding-top: 2vw;
  color: #969799;
  line-height: 6vw;
  font-size: 3vw;
}
.goods_rate {
  color: #ff853e;
}
</style>